<template>
    <div>
        <!-- 头部面包屑 -->
        <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>商品管理</el-breadcrumb-item>
            <el-breadcrumb-item>商品分类</el-breadcrumb-item>
        </el-breadcrumb>

        <!-- 主体展示部分 -->
        <el-card>
            <el-row>
                <el-col>
                    <el-button 
                     type="primary"
                     @click="addClass">添加分类</el-button>
                </el-col>
            </el-row>

            <tree-table 
            class="tree-table"
            :data="cateList"
            :columns="columns"
            :selection-type="false"
            :expand-type="false"
            show-index
            index-text="#"
            border
            :show-row-hover="false"
            >
                <!-- 是否有效 -->
                <template slot="isok" scope="{row}">
                    <i class="el-icon-success" v-if="row.cat_deleted === false" style="color:lightgreen"></i>
                    <i class="el-icon-error" v-else style="color:red"></i>
                </template>

                <!-- 排列等级 -->
                <template slot="level" scope="{row}">
                    <el-tag v-if="row.cat_level === 0">一级</el-tag>
                    <el-tag type="success" v-else-if="row.cat_level === 1">二级</el-tag>
                    <el-tag type="warning" v-else>三级</el-tag>
                </template>
                
                <!-- 操作功能 -->
                <template slot="operate" scope="{row}">
                    <el-button type="primary" icon="el-icon-edit"
                    @click="editCate(row)">编辑</el-button>
                    <el-button 
                     type="danger" 
                     icon="el-icon-delete"
                     @click="delCate(row)">删除</el-button>
                </template>
            </tree-table>

            <!-- 底部页码 -->
            <div class="block">
                <el-pagination
                :current-page="queryInfo.pagenum"
                :page-size="queryInfo.pagesize"
                :page-sizes="[1,3,5,10]"
                @size-change="sizeChange"
                @current-change="currentChange"
                layout="total, prev, pager, next, jumper,sizes"
                :total="total">
                </el-pagination>
            </div>

        </el-card>

        <!-- 添加分类_dialog对话框 -->
        <el-dialog
            title="添加分类"
            :visible.sync="addClassDialogVisible"
            :modal-append-to-body="false"
            width="40%"
            @close="closeDialog">

            <el-form 
             ref="addClass_formRef" 
             :model="addClass_formData"
             :rules="addClass_formRules"
             label-width="100px">
                <el-form-item 
                 label="分类名称：" 
                 prop="cat_name"
                 required>
                    <el-input v-model="addClass_formData.cat_name">
                    </el-input>
                </el-form-item>

                <el-form-item 
                 label="父级分类："
                 prop="cat_level">
                 <!-- options指定数据源 -->
                 <!-- props指定配置对象 -->
                 <!-- v-model 将选中的值双向绑定到指定的data中，它返回的是一个数组 -->
                    <el-cascader
                     v-model="addClass_level2_currentData"
                     :options="addClass_level2"
                     :props="cascaderProps"
                     @change="currentDataChange"
                     clearable
                     change-on-select>
                    </el-cascader>
                </el-form-item>
            </el-form>
            <div slot="footer">
                <el-button @click="addClassDialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="addClassCommit">确 定</el-button>
            </div>
        </el-dialog>

        <!-- 编辑商品分类_dialog对话框 -->
        <el-dialog
         title="编辑商品分类"
         :visible.sync="editCateDialogVisible"
         width="40%"
         :modal-append-to-body="false"
         @close="closeEditCate"
         :close-on-click-modal="false">
            <el-form 
             ref="editCate_formRef" 
             :model="editCateData"
             label-width="100px"
             :rules="editCateRules"
             >
                <el-form-item label="分类名称："
                required
                prop="cat_name"
                >
                    <el-input v-model="editCateData.cat_name"></el-input>
                </el-form-item>
            </el-form>

            <div slot="footer" class="dialog-footer">
                <el-button @click="editCateDialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="editCateCommit">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
export default {
    name:'Cate',
    data(){
        return {
            // 查询条件
            queryInfo:{
                // type代表要获取的数据是多少层的，我们需要3层数据
                type:3,
                // pagenum代表我们需要的页码为多少
                pagenum:1,
                // pagesize代表我们每页需要展示多少条数据
                pagesize:5
            },
            // 商品分类的数据列表，默认为空
            cateList:[],
            // 默认总数据条数
            total:0,
            // 树形表格每列的配置
            columns:[
                {
                    label:'分类名称',
                    prop:'cat_name',
                    minWidth:'100px'
                },
                {
                    label:'是否有效',
                    // 将当前列定义为模板列
                    type:'template',
                    // 当前列模板中定义的插槽的具体名称
                    template:'isok',
                    minWidth:'100px'
                },
                    // 将排序列定义为模板列
                {
                    label:'排序',
                    type:'template',
                    template:'level',
                    minWidth:'100px'
                },
                // 将操作列定义为模板列
                {
                    label:'操作',
                    type:'template',
                    template:'operate',
                    minWidth:'100px'
                }
            ],
            // 控制添加分类的dialog对话框
            addClassDialogVisible:false,
            // 添加分类表单数据对象
            addClass_formData:{
                cat_name:'',
                cat_pid:0,
                cat_level:0
            },
            // 添加分类_验证规则对象
            addClass_formRules:{
                cat_name:[
                    {
                        required:true,
                        message:'请输入分类名称',
                        trigger:'blur'
                    }
                ]
            },
            // 添加分类_获取到的所有2级分类
            addClass_level2:[],
            // 添加分类_父级分类_选中的具体数据
            addClass_level2_currentData:[],
            // 指定接连配置
            cascaderProps:{ 
                expandTrigger:'hover',
                label:'cat_name',
                value:'cat_id',
                children:'children',
            },
            
            // 编辑商品分类相关功能
            // 编辑功能的dialog开关
            editCateDialogVisible:false,
            // 编辑表单相关数据
            editCateData:{
                cat_name:'', 
            },
            // 编辑表单的验证规则对象
            editCateRules:{
                cat_name:[
                    {
                        required:true,
                        message:'请输入分类名称',
                        trigger:'blur'
                    }
                ]
            },
            // 编辑中的id
            currentEditId:0,

            // 删除中的id
            currentDelId:0
        }
    },
    methods: {
        async getCateList(){
            const {data:res} = await this.$axios.get('categories',{
                params:this.queryInfo,
            });
            if(res.meta.status!==200) return this.$message.error(res.msg);
            console.log(res);
            // 成功请求成功后将数据传送给cateList
            this.cateList = res.data.result
            // 为总数据条数赋值
            this.total = res.data.total
        },
        // 监听用户设置当前页展示多少条数据
        sizeChange(newSize){
            this.queryInfo.pagesize = newSize;
            this.getCateList();
        },
        // 监听用户切换页码后
        currentChange(newPage){
            this.queryInfo.pagenum = newPage
            this.getCateList()
        },
        async getCateListLevel2(){
            const {data:res} = await this.$axios.get('categories',{
                params:{
                    ...this.queryInfo,
                    type:2
                }
            });
            if(res.meta.status!==200) return this.$message.error(res.msg);
            console.log(res);
            this.addClass_level2 = res.data.result
        },
        // 监听用户单击添加分类后
        addClass(){
            // 获取到所有2级分类
            this.getCateListLevel2();
            // 展示出对话框
            this.addClassDialogVisible = true;
        },
        // 添加分类选择项发生变化时触发
        currentDataChange(){
            console.log(this.addClass_level2_currentData);
            // 如果select中对应的数组他的长度为0
            // 那么证明他没有选中父级分类
            // 如果select中的长度为1，则证明他选中了1级父级，需要为他创建该对应的1级父级类
            // 下的2级分类
            
            const length = this.addClass_level2_currentData.length;
            
            if(length>0){
                this.addClass_formData.cat_pid = this.addClass_level2_currentData[length -1]
                this.addClass_formData.cat_level = length
                return 
            }else{
                this.addClass_formData.cat_pid = 0;
                this.addClass_formData.cat_level = 0;
            }
        },
        // 添加分类后点击确认后触发
        addClassCommit(){
            this.$refs.addClass_formRef.validate(async valid=>{
                if(!valid) return this.$message.error("表单格式不正确")

                // 请求添加分类时需要传递三个参数，对应了我们
                // 当前的添加分类的表单数据
                const {data:res} = await this.$axios.post('categories',this.addClass_formData)
                if(res.meta.status!==201) return this.$message.error(res.meta.msg);
                this.$message.success(res.meta.msg)
                this.getCateList();
                this.addClassDialogVisible = false;
            })
        },
        // 关闭dialog对话框时重置表单
        closeDialog(){
            this.$refs.addClass_formRef.resetFields();
            this.addClass_level2_currentData = [];
            this.addClass_formData.cat_pid = 0;
            this.addClass_formData.cat_level = 0;
        },
        // 商品分类点击编辑后触发
        editCate(row){
            this.editCateDialogVisible = true;
            this.currentEditId = row.cat_id;
        },
        // 商品分类点击编辑后点击确认后触发
        editCateCommit(){
            this.$refs.editCate_formRef.validate(async valid=>{
                if(!valid) return this.$message.error('表单格式不正确');

                const {data:res} = await this.$axios.put(`categories/${this.currentEditId}`,this.editCateData)

                if(res.meta.status!==200) return this.$message.error(res.meta.msg);
                
                this.$message.success(res.meta.msg);
                this.getCateList();
                this.editCateDialogVisible = false;
            })
        },
        // 当编辑商品分类dialog对话框关闭时，触发
        closeEditCate(){
            this.$refs.editCate_formRef.resetFields();
        },
        // 当用户单击删除按钮时触发
        delCate(row){
            this.currentDelId = row.cat_id;
            this.$messageBox.confirm('此操作将永久删除该商品分类, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
                }).then(async _ => {
                    const {data:res} = await this.$axios.delete(`categories/${this.currentDelId}`)

                    if(res.meta.status!==200) return this.$message.error(res.meta.msg);
                    
                    this.$message.success(res.meta.msg);
                    this.getCateList()
                    
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });          
                });
        }
        
    },
    created() {
        this.getCateList();
    },
    
}
</script>

<style lang="less" scoped>
    .el-form-item{
        text-align: center;
    }
    .el-cascader{
        width: 100%;
    }
</style>